const char index_html[] PROGMEM=R"rawliteral(
  <!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,viewport-fit=cover">
  <!--<script type="text/javascript" src="./cdn_modules/crypto-js@4.2.0/crypto-js.min.js"></script>-->

  <title>WiFi开车库</title>
  <!-- HTML -->
  <!-- Custom Styles -->
  <!--<link rel="stylesheet/less" href="css/index.less">-->
  <!--<script type="text/javascript" src="cdn_modules/less.js@4.2.0/less.min.js"></script>-->
  
 <style>
    *{padding:0;margin:0}html{height:100%}body{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}.message{text-align:center;color:green;font-size:4vw}wifi-switch{flex:1}wifi-footer{margin-bottom:2vw}

 </style>
</head>

<body>
  <p class="message">提示信息</p>
  <wifi-switch></wifi-switch>
  <wifi-footer></wifi-footer>
  <!-- Project -->
  <script type="module">
    (function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))a(o);new MutationObserver(o=>{for(const n of o)if(n.type==="childList")for(const r of n.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&a(r)}).observe(document,{childList:!0,subtree:!0});function i(o){const n={};return o.integrity&&(n.integrity=o.integrity),o.referrerPolicy&&(n.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?n.credentials="include":o.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function a(o){if(o.ep)return;o.ep=!0;const n=i(o);fetch(o.href,n)}})();class d extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
    <style>
    :host{
      position:relative;
      display:flex;
      justify-content:center;
      align-item:center;
      overflow:hidden;
    }
    .wrap{
      border:solid 0.5vw black;
      box-shadow:1.5vw 1.5vw 2vw;
      margin:auto;
    }
    .up{
     border:solid 25vw transparent;
     border-bottom:solid 50vw black;
     border-top:none;
     box-sizing:border-box;
     position:relative;
     margin-bottom:1vw;
    }
    .up:after{
      content:'';
      display:block;
      border:solid 25vw transparent;
      border-bottom:solid 50vw white;
      border-top:none;
      position:absolute;
      transform-origin:50% 70%;
      transform:translateX(-50%) scale(0.95);
    }
    .up:active.up:after{
      border-bottom-color:gray;
    }
    .down{
      border:solid 25vw transparent;
      border-top:solid 50vw black;
      border-bottom:none;
      box-sizing:border-box;
      position:relative;
    }
    .down:after{
      content:'';
      display:block;
      border:solid 25vw transparent;
      border-top:solid 50vw white;
      border-bottom:none;
      position:absolute;
      top:-50vw;
      transform-origin:50% 30%;
      transform:translateX(-50%) scale(0.95);
    }
    .down:active.down:after{
      border-top-color:gray;
    }
    </style>
     <wifi-login></wifi-login>
    <div class='wrap'>
     
      <div class='up'></div>
      <div class='down'></div>      
    </div>
  `,this.up=this.shadowRoot.querySelector(".wrap>.up"),this.down=this.shadowRoot.querySelector(".wrap>.down"),this.wifiLogin=this.shadowRoot.querySelector("wifi-login");const t=new Event("upClick"),i=new Event("downClick");t.name="实验",this.up.addEventListener("click",()=>{this.dispatchEvent(t)}),this.down.addEventListener("click",()=>{this.dispatchEvent(i)})}}customElements.define("wifi-switch",d);class p extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`
    <style>
    :host{
      width:100%;
    }
    .wrap{
      display:flex;
      justify-content:space-evenly;
    }
    .wrap>button{
      font-size:8vw;
    }
    </style>
    <div class='wrap'>
      <button class='reconnect'>重连</button>
      <button class='showLogin'>登陆</button>
      <button class='exit'>退出</button>
    </div>
  `,this.showLogin=this.shadowRoot.querySelector(".wrap>.showLogin"),this.exit=this.shadowRoot.querySelector(".wrap>.exit"),this.reconnect=this.shadowRoot.querySelector(".wrap>.reconnect")}}customElements.define("wifi-footer",p);const c=document.createElement("template");c.innerHTML=`
<style>
:host{
  position:absolute;
  z-index:99;
  text-align:center;
  background-color:red;
  overflow:hidden;
}
.loginWrap{
  display:inline-flex;
  background-color:gray;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  font-size:6vw;
  padding:5vw;
}
.loginWrap>label{
  text-align:right;
  width:100%;
  margin-bottom:6vw;
}
.loginWrap>label>input{
  font-size:6vw;
  width:50vw;
}
.loginWrap>button{
  font-size:6vw;
}
</style>
<div class='loginWrap'>
  <label>用户名:<input type='text' name='username'></label>
  <label>密码:<input type='password' name='password'></label>
  <button>登录</button>
</div>
`;class u extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(c.content.cloneNode(!0)),this.addEventListener("click",i=>{i.stopPropagation()}),this.username=this.shadowRoot.querySelector(".loginWrap>label>input[name=username]"),this.password=this.shadowRoot.querySelector(".loginWrap>label>input[name=password]");const t=new Event("loginClick");this.shadowRoot.querySelector(".loginWrap>button").addEventListener("click",i=>{Object.assign(t,{username:this.username.value,password:this.password.value}),this.dispatchEvent(t)})}}customElements.define("wifi-login",u);JSON.parse(localStorage.getItem("login"));const w=async e=>await fetch("./js/files/login.json",{method:"POST",myvalue:e}).then(i=>i.json()),h=document.querySelector(".message"),s=document.querySelector("wifi-switch"),l=document.querySelector("wifi-footer"),g=innerHeight;document.body.style.height=g+"px";document.body.addEventListener("click",e=>{s.wifiLogin.style.display="none"});s.wifiLogin.addEventListener("loginClick",async e=>{const t=await w(`{username:${e.username},password:${e.password}}`);t.password?localStorage.setItem("login",JSON.stringify(t)):h.innerText="提示信息:密码错误！",console.log("getItem",localStorage.getItem("login")),console.log(t.password),console.log("loginClick",e.username+"_"+e.password)});s.addEventListener("upClick",e=>{console.log("upClick",e.name)});s.addEventListener("downClick",e=>{console.log("downClick")});l.reconnect.addEventListener("click",e=>{});l.showLogin.addEventListener("click",e=>{let t=getComputedStyle(s.wifiLogin).display;s.wifiLogin.style.display=t=="none"?"block":"none",e.stopPropagation()});l.exit.addEventListener("click",e=>{window.close()});

  </script>
</body>
</html>
)rawliteral";
